React Streaming: Progressive Server-Side Rendering untuk Pengalaman Pengguna yang Optimal

Di dunia pengembangan web, memberikan pengalaman pengguna yang cepat dan responsif adalah hal yang paling utama. Pengguna mengharapkan situs web dimuat dengan cepat dan interaktif tanpa penundaan. React, sebuah pustaka JavaScript populer untuk membangun antarmuka pengguna, menawarkan teknik canggih yang disebut Streaming Server-Side Rendering (SSR) untuk mengatasi tantangan ini. Artikel ini membahas konsep React Streaming SSR, menjelajahi manfaatnya, implementasinya, dan dampaknya pada kinerja situs web dan pengalaman pengguna.

Apa itu Server-Side Rendering (SSR)?

Traditional client-side rendering (CSR) melibatkan browser mengunduh file HTML, JavaScript, dan CSS, kemudian merender konten di sisi klien. Meskipun fleksibel, pendekatan ini dapat menyebabkan penundaan rendering awal, karena pengguna harus menunggu semua sumber daya diunduh dan JavaScript dieksekusi sebelum melihat konten apa pun. SSR, di sisi lain, merender komponen React di server dan mengirimkan HTML yang sepenuhnya dirender ke klien. Hal ini menghasilkan waktu muat awal yang lebih cepat, karena browser menerima HTML yang terbentuk sepenuhnya yang dapat ditampilkan segera.

Keterbatasan SSR Tradisional

Meskipun SSR tradisional menawarkan peningkatan yang signifikan dibandingkan CSR, ia memiliki keterbatasannya sendiri. Dalam SSR tradisional, seluruh aplikasi perlu dirender di server sebelum HTML apa pun dikirim ke klien. Ini bisa menjadi hambatan, terutama untuk aplikasi kompleks dengan banyak komponen dan ketergantungan data. Time to First Byte (TTFB) bisa tinggi, yang menyebabkan kelambatan yang dirasakan oleh pengguna.

Memasuki React Streaming SSR: Pendekatan Progresif

React Streaming SSR mengatasi keterbatasan SSR tradisional dengan mengadopsi pendekatan progresif. Alih-alih menunggu seluruh aplikasi dirender di server, Streaming SSR memecah proses rendering menjadi potongan-potongan yang lebih kecil dan mengalirkan potongan-potongan ini ke klien saat tersedia. Hal ini memungkinkan browser untuk mulai menampilkan konten lebih awal, meningkatkan kinerja yang dirasakan dan mengurangi TTFB. Bayangkan seperti restoran yang menyiapkan makanan Anda secara bertahap: makanan pembuka disajikan terlebih dahulu, kemudian hidangan utama, dan terakhir hidangan penutup, daripada menunggu seluruh makanan siap sekaligus.

Manfaat React Streaming SSR

React Streaming SSR menawarkan banyak manfaat untuk kinerja situs web dan pengalaman pengguna:

• Waktu Muat Awal Lebih Cepat: Dengan mengalirkan potongan HTML ke klien, browser dapat mulai menampilkan konten lebih awal, menghasilkan waktu muat yang dirasakan lebih cepat dan meningkatkan keterlibatan pengguna.
• Time to First Byte (TTFB) yang Ditingkatkan: Streaming SSR mengurangi TTFB dengan mengirimkan potongan HTML awal segera setelah siap, daripada menunggu seluruh aplikasi dirender.
• Pengalaman Pengguna yang Ditingkatkan: Waktu muat awal yang lebih cepat menghasilkan pengalaman pengguna yang lebih baik, karena pengguna tidak perlu menunggu konten muncul.
• SEO yang Lebih Baik: Mesin pencari dapat merayapi dan mengindeks konten dengan lebih efektif, karena HTML tersedia di server.
• Hidrasi Progresif: Streaming SSR memungkinkan hidrasi progresif, di mana kode React sisi klien secara bertahap melampirkan pendengar acara dan membuat aplikasi interaktif saat potongan HTML dialirkan.
• Peningkatan Pemanfaatan Sumber Daya: Dengan memecah proses rendering menjadi potongan-potongan yang lebih kecil, Streaming SSR dapat meningkatkan pemanfaatan sumber daya di server.

Bagaimana Cara Kerja React Streaming SSR

React Streaming SSR memanfaatkan API ReactDOMServer.renderToPipeableStream() untuk mengalirkan potongan HTML ke klien. API ini mengembalikan aliran yang dapat dibaca yang dapat disalurkan ke objek respons server. Berikut adalah ilustrasi sederhana tentang cara kerjanya:

1. Server menerima permintaan untuk sebuah halaman.
2. Server memanggil ReactDOMServer.renderToPipeableStream() untuk merender aplikasi React ke dalam aliran.
3. Aliran mulai memancarkan potongan HTML saat komponen React dirender.
4. Server menyalurkan aliran ke objek respons, mengirimkan potongan HTML ke klien.
5. Browser menerima potongan HTML dan mulai menampilkannya secara progresif.
6. Setelah semua potongan HTML diterima, browser menghidrasi aplikasi React, membuatnya interaktif.

Mengimplementasikan React Streaming SSR

Untuk mengimplementasikan React Streaming SSR, Anda memerlukan server Node.js dan aplikasi React. Berikut adalah panduan langkah demi langkah:

1. Siapkan server Node.js: Buat server Node.js menggunakan kerangka kerja seperti Express atau Koa.
2. Instal React dan ReactDOMServer: Instal paket react dan react-dom.
3. Buat aplikasi React: Buat aplikasi React dengan komponen yang ingin Anda render di server.
4. Gunakan ReactDOMServer.renderToPipeableStream(): Dalam kode server Anda, gunakan API ReactDOMServer.renderToPipeableStream() untuk merender aplikasi React Anda ke dalam aliran.
5. Salurkan aliran ke objek respons: Salurkan aliran ke objek respons server untuk mengirimkan potongan HTML ke klien.
6. Tangani kesalahan: Implementasikan penanganan kesalahan untuk menangkap kesalahan apa pun yang mungkin terjadi selama proses rendering.
7. Tambahkan tag skrip untuk hidrasi: Sertakan tag skrip di HTML untuk menghidrasi aplikasi React di sisi klien.

Contoh Cuplikan Kode (Sisi Server):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Komponen React Anda

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Titik masuk sisi klien
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Maaf, terjadi kesalahan
');
    }
  });

  setTimeout(abort, 10000); // Opsional: Batas waktu untuk mencegah gantung tanpa batas
});

app.use(express.static('public')); // Sajikan aset statis

app.listen(port, () => {
  console.log(`Server mendengarkan di http://localhost:${port}`);
});

Contoh Cuplikan Kode (Sisi Klien - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Contoh Komponen Aplikasi React (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data berhasil dimuat!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulasikan penundaan pemuatan
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Selamat Datang di Streaming SSR!
      
Ini adalah demonstrasi React Streaming SSR.
      Memuat...
}>